<?php include '../public/header.php' ?>
<?php include '../public/header_index.php' ?>
<script type="text/javascript" src="/static/admin/echarts/echarts.min.js"></script>
<style>
    .ttt{background-color: #FFFFFF;min-height: 800px;padding: 10px 0;}
    .nei .zuo{float: left;width: calc(100% - 20px);padding-right: 20px}
    .nei .ddbt{font-weight: 700;font-size: 20px;color: #1CA5FF;padding-left: 20px;}
    .nei .xxbt{font-weight: 700;font-size: 16px;padding-bottom: 10px}
    .nei .zuo .xkk{height: 70px;width: calc(25% - 22px);margin-left:20px;border: 1px solid #eee;border-radius: 10px;float: left;position: relative}
    .nei .zuo .tu{width: 30px;height: 30px;position: absolute;left: 30px;top: 20px;}
    .nei .zuo .w1{padding-left: 70px;color: #777;margin-top: 12px}
    .nei .zuo .w2{padding-left: 70px;font-size: 20px;font-weight: 700;}
    .nei .zuo .erhbb{margin-top: 20px}
    .nei .zuo .erhxx{margin-top: 20px}
    .nei .zuo .erh{float: left;margin-left: 20px;width: calc(33.33% - 22px);}
    .nei .zuo .eraah{float: left;margin-left: 20px;width: calc(50% - 22px);}
    .nei .zuo .qqtt{border: 1px solid #eee;border-radius: 10px;height: 220px;}
    .nei .zuo .qqttaa{border: 1px solid #eee;border-radius: 10px;height: 280px;}
    .nei .zuo .qtzhan{height: 100px;overflow: hidden;margin-top: 50px;position: relative}
    .nei .zuo .qtzhan div{padding-left: 60px}
    .nei .zuo .qtzhan span{position: relative;top:2px;left:-7px;display: inline-block;width: 15px;height: 15px;}
    .float-l{float: left}
    .wd50{width: 50%}
    .layui-table-tool{display: none}
    .tipss{cursor: pointer;}
</style>
<body class="laytp-container" style="padding: 10px">
<div class="layui-card" id="search-form" style="margin: 0;box-shadow:unset">
    <div class="layui-card-body">
<!--        <form class="layui-form" id="TableSearchFormId" lay-filter="TableSearchForm" onkeydown="keyTableSearch('TableSearchForm', 'datalist')">-->
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <label class="layui-form-label">年度</label>
                        <div class="layui-input-block">
                            <input type="text" id="year" placeholder="请输入" autocomplete="off" class="layui-input bdate_sea_y">
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">所属单位</label>
                        <div class="layui-input-block">
                            <div id="chanid" class="xmselect_div">
                                <div class="xmselect_title">请选择</div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item search-div">
                            <div class="layui-form-item layui-inline">
                                <button class="laytp-btn laytp-btn-md laytp-btn-primary" id="listSeaZuo"><i class="layui-icon layui-icon-search"></i>查询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--        </form>-->
    </div>
</div>
<div class="ttt">
    <div class="nei">
        <div class="zuo">
            <div style="width: 60%">
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_1">年度开工项目数</span></div>
                    <div class="w2 niankainum">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_2">年度开工项目合同造价(元)</span></div>
                    <div class="w2 nianhefee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_3">年度竣工项目数</span></div>
                    <div class="w2 nianjunnum">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_4">年度中标待开工项目数</span></div>
                    <div class="w2 niandainum">0</div>
                </div>
                <div style="clear: both"></div>
            </div>
            <div class="erhbb">
                <div class="erh">
                    <div class="xxbt"><span class="tipss tipss_5">项目状态-合同造价</span></div>
                    <div class="qqtt">
                        <div class="wd50 float-l" id="zi_chart_xmzthtzj" style="height: 220px"></div>
                        <div class="wd50 float-l qtzhan xmzthtzj_list"></div>
                    </div>
                </div>
                <div class="erh">
                    <div class="xxbt"><span class="tipss tipss_6">开工项目类型-合同造价</span></div>
                    <div class="qqtt">
                        <div class="wd50 float-l" id="zi_chart_xmlxhtzj" style="height: 220px"></div>
                        <div class="wd50 float-l qtzhan xmlxhtzj_list"></div>
                    </div>
                </div>
                <div class="erh">
                    <div class="xxbt"><span class="tipss tipss_7">项目属性-中标工程价</span></div>
                    <div class="qqtt">
                        <div class="wd50 float-l" id="zi_chart_xmsxhtzj" style="height: 220px"></div>
                        <div class="wd50 float-l qtzhan xmsxhtzj_list"></div>
                    </div>
                </div>
            </div>
            <div style="clear: both"></div>
            <div class="erhxx">
                <div class="eraah">
                    <div class="xxbt"><span class="tipss tipss_8">年度中标自营项目排行</span></div>
                    <div class="qqttaa">
                        <div id="zi_chart_winzilist" style="height: 280px"></div>
                    </div>
                </div>
                <div class="eraah">
                    <div class="xxbt"><span class="tipss tipss_9">年度中标联营项目排行</span></div>
                    <div class="qqttaa">
                        <div id="zi_chart_winlianlist" style="height: 280px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const colors = ['#5470C6', '#FAC858', '#91CC75', '#73C0DE', '#FD7E55', '#E87BCA', '#3BA272', '#EE6666'];

    layui.use(["laytp",'laypage','table','dropdown','form','soulTable'], function () {
        var laypage = layui.laypage, table = layui.table, dropdown = layui.dropdown, form = layui.form, soulTable = layui.soulTable;


        $("#listSeaZuo").click(function () {
            var year = $("#year").val();
            var chanid = $("input[name='chanid']").val();
            func_engin_tongtou_zuo(year, chanid);
        });



        func_engin_tongtou_zuo();
        function func_engin_tongtou_zuo(year='', chanid='') {
            facade.ajax({url: ask_engin_tonggong_info_list, data:{year: year, chanid:chanid}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    $(".niankainum").text(data.niankainum);
                    $(".nianhefee").text(parseFormatNum(data.nianhefee));
                    $(".nianjunnum").text(data.nianjunnum);
                    $(".niandainum").text(data.niandainum);

                    zi_chart_xmzthtzj('zi_chart_xmzthtzj', data.xmzthtzj);
                    var xmzthtzjStr = '';
                    for (var mmm in data.xmzthtzj){
                        xmzthtzjStr += '<div>';
                        xmzthtzjStr += '<span style="background-color: '+colors[mmm]+';"></span>';
                        xmzthtzjStr += data.xmzthtzj[mmm].name+'（'+data.xmzthtzj[mmm].num+'）：'+parseFormatNum(data.xmzthtzj[mmm].value)+'</div>'
                    }
                    $(".xmzthtzj_list").html(xmzthtzjStr)


                    zi_chart_xmlxhtzj('zi_chart_xmlxhtzj', data.xmlxhtzj);
                    var xmlxhtzjStr = '';
                    for (var nnn in data.xmlxhtzj){
                        if(nnn <=5){
                            xmlxhtzjStr += '<div>';
                            xmlxhtzjStr += '<span style="background-color: '+colors[nnn]+';"></span>';
                            xmlxhtzjStr += data.xmlxhtzj[nnn].name+'（'+data.xmlxhtzj[nnn].num+'）：'+parseFormatNum(data.xmlxhtzj[nnn].value)+'</div>'
                        }
                    }
                    $(".xmlxhtzj_list").html(xmlxhtzjStr)



                    zi_chart_xmsxhtzj('zi_chart_xmsxhtzj', data.xmsxhtzj);
                    var xmsxhtzjStr = '';
                    for (var aaa in data.xmsxhtzj){
                        xmsxhtzjStr += '<div>';
                        xmsxhtzjStr += '<span style="background-color: '+colors[aaa]+';"></span>';
                        xmsxhtzjStr += data.xmsxhtzj[aaa].name+'（'+data.xmsxhtzj[aaa].num+'）：'+parseFormatNum(data.xmsxhtzj[aaa].value)+'</div>'
                    }
                    $(".xmsxhtzj_list").html(xmsxhtzjStr)


                    $("#year").val(res.data.is_year);
                    xmselect_dan('chanid', res.data.chanid, res.data.is_chanid)



                    var ziNameArr = [];
                    var ziValueArr = [];
                    for(var ppp in data.winzilist){
                        ziNameArr.push(data.winzilist[ppp].name);
                        ziValueArr.push(data.winzilist[ppp].shimoney);
                    }
                    zi_chart_winzilist('zi_chart_winzilist', ziNameArr, ziValueArr);



                    var lianNameArr = [];
                    var lianValueArr = [];
                    for(var qqq in data.winlianlist){
                        lianNameArr.push(data.winlianlist[qqq].name);
                        lianValueArr.push(data.winlianlist[qqq].shimoney);
                    }
                    zi_chart_winlianlist('zi_chart_winlianlist', lianNameArr, lianValueArr);


                    render_from();
                }
            });
        }





    });




    $(".tipss_1").hover(function(){hhzhu_index = layer.tips('实际开工日期在当前年度的项目数量',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_2").hover(function(){hhzhu_index = layer.tips('实际开工日期在当前年度的项目收入合同金额（含补充合同）之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_3").hover(function(){hhzhu_index = layer.tips('实际竣工日期在当前年度的项目数量',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_4").hover(function(){hhzhu_index = layer.tips('中标日期在当前年度，尚未开工的项目数',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_5").hover(function(){hhzhu_index = layer.tips('当前年度进入相应状态的项目数量，和对应的收入合同金额（含补充合同）之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_6").hover(function(){hhzhu_index = layer.tips('实际开工日期在当前年度的项目数量和对应的收入合同金额（含补充合同）之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_7").hover(function(){hhzhu_index = layer.tips('中标日期在当前年度的自营/联营项目各自的数量和收入合同金额（含补充合同）之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_8").hover(function(){hhzhu_index = layer.tips('中标日期为本年度的自营项目，按收入合同金额（含补充合同）金额排序前十',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_9").hover(function(){hhzhu_index = layer.tips('中标日期为本年度的联营项目，按收入合同金额（含补充合同）金额排序前十',this,{time:0});},function(){layer.close(hhzhu_index);});







    function zi_chart_xmzthtzj(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: colors,
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '80%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_xmlxhtzj(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: colors,
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '80%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_xmsxhtzj(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: colors,
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '80%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_winzilist(chat_id, dataname, datavalue) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[7]],
            backgroundColor: '#FFFFFF',
            grid: {
                top: '15px',
                bottom: '1px',
                left: '1',
                right: '1',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: dataname
            },
            yAxis: {
                type: 'value'
            },
            legend: {},
            tooltip: {},
            series: [
                {
                    data: datavalue,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_winlianlist(chat_id, dataname, datavalue) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[6]],
            backgroundColor: '#FFFFFF',
            grid: {
                top: '15px',
                bottom: '1px',
                left: '1',
                right: '1',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: dataname
            },
            yAxis: {
                type: 'value'
            },
            legend: {},
            tooltip: {},
            series: [
                {
                    data: datavalue,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        mychat.setOption(option);
    }
</script>
</body>
</html>
